<template>
	<i-drawer v-model="delectShow" title="你确认要解绑银行卡吗？" confirm_title="解绑" @confirm="confirm"></i-drawer>
	<i-drawers v-model="showAdd" bodyHeight="480rpx">
		<view class="selectData">
			<view class="selectData_title">
				请选择需要添加的提现方式
			</view>
			<view class="selectItem" v-for="(item,index) in mer_account_type" :key="index" @click="handleMethod(item)">
				{{item.label}}
			</view>
			<view class="selectData_b" @click="showAdd = false">
				取消
			</view>
		</view>
	</i-drawers>
	<view class="business_methods">
		<view class="top_body">
			<view class="titles">企业认证信息</view>
			<view class="select_withdrawal">
				<view class="select_left">
					<text class="select_text">{{companyInfo.merAuthName}}</text>
					<text>可绑定企业对公账户，或一张企业法人对私银行卡</text>
				</view>
			</view>
		</view>
		<i-scrollList :total="bankList.length" :pageTotal="bankList.length" height="calc(100vh - 322rpx)">
			<i-card bottom="20rpx" v-for="(item,index) in bankList" :key="index">
				<view class="card_body" @click.stop="select(item)">
					<view class="body_l">
						<image src="../../static/images/bank_card_icon.png" mode=""></image>
					</view>
					<view class="body_R">
						<text class="bank_name">{{item.bankDeposit}}</text>
						<text>{{item.accountTypeLabel}}</text>
						<text>{{bankEncryption(item.bankcardNum)}}</text>
						<view v-if="item.accountType === '30002002'" style="display: flex;margin-top: 20rpx;">
							<i-buttons :radius="32" padding="14rpx 34rpx" color="#8E8E93" border="#F2F2F7"
								@click="handleClick(item)">解绑</i-buttons>
						</view>
					</view>
				</view>
			</i-card>
		</i-scrollList>
		<view class="flex_bottom" @click="showAdd = true">
			<image src="../../static/images/add@2x.png"></image>
			添加银行卡
		</view>
	</view>
</template>
<script lang="ts" setup>
	import {
		computed,
		onMounted,
		ref
	} from 'vue';
	import {
		navTo,
		bankEncryption,
		showTost
	} from '../../utils/common'
	import {
		getApiMerCashCardList,
		tlDelete
	} from '../../api/trilateral'
	import {
		onUnload,
		onShow
	} from '@dcloudio/uni-app'
	import useStore from '../../stores/index'
	const delectShow = ref(false)
	const bankList = ref<any>([])
	const slectId = ref('')
	const showAdd = ref(false)
	const store = useStore()

	const companyInfo = computed(() => {
		return store.companyInfo as any
	})

	const mer_account_type = computed(() => {
		return store.dictTypes['mer_account_type']
	})

	const select = (item : any) => {
		uni.$emit('changePay', item)
		uni.navigateBack()
	}

	const handleMethod = (item : { label : string, value : string }) => {
		if (bankList.value.some((i : { accountType : string }) => i.accountType === '30002002') && item.value === '30002002') {
			showTost('对私账户只允许绑定一张银行卡')
			return
		}
		if (bankList.value.filter((i : { accountType : string }) => i.accountType === '30002001').length === 9 && item.value === '30002001') {
			showTost('对公账户最多只能绑定9张银行卡')
			return
		}

		navTo(`/pages/withdrawal/addTl_bank?mer_account_type=${item.value}&title=${item.label}`, 'navigateTo')
		showAdd.value = false
	}


	const confirm = async () => {
		await tlDelete({ id: slectId.value })
		showTost('解绑成功！')
		getTlList()
	}

	const getTlList = async () => {
		const { data } = await getApiMerCashCardList()
		bankList.value = data
	}
	const handleClick = (i : { id : string }) => {
		slectId.value = i.id
		delectShow.value = true
	}

	onMounted(() => {
		store.setDictList('mer_account_type')
	})
	onShow(() => {
		getTlList()
	})
</script>

<style lang="scss" scoped>
	.business_methods {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: $backColor;

		.top_body {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			padding-bottom: 40rpx;

			.titles {
				@include dfont;
				color: #2C2C2E;
				margin: 24rpx 0;
			}

			.select_withdrawal {
				@include flexRS;

				.select_left {
					@include flexC;
					@include dfont(24rpx);
					color: #A0A0AD;

					.select_text {
						@include titlefont(32rpx);
						margin-bottom: 10rpx;
					}
				}

			}
		}

		.card_body {
			@include flexR;
			align-items: flex-start;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.body_R {
				margin-left: 20rpx;
				@include flexC;
				@include dfont(26rpx);
				color: #8E8E93;

				.bank_name {
					@include titlefont(32rpx);
					margin-bottom: 8rpx;
				}

				text {
					margin-bottom: 6rpx;
				}
			}
		}
	}


	.selectData {
		@include flexCC;
		justify-content: flex-start;
		width: 100%;
		height: 480rpx;

		.selectData_title {
			width: 100%;
			border-bottom: 1rpx solid #f3f4f5;
			@include dfont;
			color: #8E8E93;
			height: 104rpx;
			@include flexCC;
			margin-top: -20rpx;
		}

		.selectItem {
			width: 100%;
			height: 104rpx;
			@include flexCC;
			@include dfont(32rpx);
			border-bottom: 1rpx solid #f3f4f5;
		}

		.selectData_b {
			width: 100%;
			border-top: 16rpx solid #f3f4f5;
			@include dfont(32rpx);
			height: 104rpx;
			@include flexCC;
		}

	}
</style>